<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>满屋花</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/layout.css">
    <link rel="stylesheet" href="./css/top.css">
    <link rel="stylesheet" href="./css/left.css">
    <link rel="stylesheet" href="./css/right.css">
</head>

<body>
    <!-- 文档居中 -->
    <div class="center">
        <!-- 头部 -->
        <div class="top">
            <!-- 广告 -->
            <div class="banner">

            </div>
            <!-- 导航栏 -->
            <div class="links">
                <ul>
                    <li><a href="#">鲜花礼品</a></li>
                    <li><a href="#">自助订花</a></li>
                    <li><a href="#">绿色植物</a></li>
                    <li><a href="#">花之物语</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">支付方式</a></li>
                </ul>
            </div>
        </div>

        <!-- 左部 -->
        <div class="left">
            <!-- 登录注册 -->
            <div class="login">
                <ul>
                    <!-- 
                    action:提交到哪里 method:怎么提交
                    get 显式提交
                    数据提交大小限制2kb
                    适用于向服务器要数据
                    post 隐式提交
                    数据提交大小不受限制
                    适用于向服务器提交数据 
                    -->
                    <form action="#" method="POST" name="form_Login">
                        <li>
                            用户：
                            <input type="text" name="txt_User" class="txtStyle">
                        </li>
                        <li>
                            密码：
                            <input type="password" name="txt_PassWord" class="txtStyle">
                        </li>
                        <li>
                            <input type="button" name="btn_Login" class="btnStyle" value="登录">
                            <input type="button" name="btn_Register" class="btnStyle" value="注册">
                            <a href="https://www.hyr6.work">忘记密码</a>
                        </li>
                    </form>
                </ul>
            </div>
            <!-- 鲜花分类 -->
            <div class="category">
                <h3>用途</h3>
                <ul>
                    <li><a href="#">爱情鲜花</a></li>
                    <li><a href="#">生日送花</a></li>
                    <li><a href="#">新年鲜花</a></li>
                    <li><a href="#">家庭用花</a></li>
                    <li><a href="#">亲情用花</a></li>
                    <li><a href="#">道歉鲜花</a></li>
                    <li><a href="#">开业花篮</a></li>
                    <li><a href="#">会议用花</a></li>
                </ul>
                <h3>花材</h3>
                <ul>
                    <li><a href="#">玫瑰花</a></li>
                    <li><a href="#">百合花</a></li>
                    <li><a href="#">郁金香</a></li>
                    <li><a href="#">太阳花</a></li>
                    <li><a href="#">康乃馨</a></li>
                    <li><a href="#">马蹄莲</a></li>
                    <li><a href="#">扶朗</a></li>
                    <li><a href="#">剑兰</a></li>
                </ul>
                <h3>价格</h3>
                <ul>
                    <li><a href="#">100～200元</a></li>
                    <li><a href="#">200～300元</a></li>
                    <li><a href="#">300～400元</a></li>
                    <li><a href="#">400～500元</a></li>
                    <li><a href="#">500～600元</a></li>
                    <li><a href="#">600～800元</a></li>
                    <li><a href="#">800元以上</a></li>
                </ul>
            </div>
        </div>

        <!-- 右部 -->
        <div class="right">
            <!-- 本站快讯 -->
            <div class="latest">
                <ul>
                    <li>
                        <a href="#"><img src="./img/new1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/new2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/new3.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <!-- 鲜花推荐 -->
            <div class="recommend">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./img/flower1.jpg" alt="">
                            <br>幸福的味道<br />
                        </a>￥288元
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/flower2.jpg" alt="">
                            <br>阳光守护你<br />
                        </a>￥300元
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/flower3.jpg" />
                            <br>温情永远<br />
                        </a>￥268元
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/flower4.jpg" />
                            <br>爱无界<br />
                        </a>￥318元
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/flower5.jpg" />
                            <br>亲亲宝贝<br />
                        </a>￥368元
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/flower6.jpg" />
                            <br>相信是缘<br />
                        </a>￥188元
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/flower7.jpg" />
                            <br>水晶童话<br />
                        </a>￥198元
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/flower8.jpg" />
                            <br>天使之爱<br />
                        </a>￥268元
                    </li>
                </ul>
            </div>
            <!-- 新品上市 -->
            <div class="news">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./img/flower9.jpg" alt="">
                            <br>粉色迷情<br />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/flower10.jpg" alt="">
                            <br>海岸的优雅<br />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/flower11.jpg" alt="">
                            <br>百年地中海<br />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/flower12.jpg" alt="">
                            <br>爱要说出口<br />
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 鲜花导购 -->
            <div class="tips">
                <ul>
                    <li><a href="#">各种鲜花代表的含义</a></li>
                    <li><a href="#">花的喜怒哀乐与人的各种感觉</a></li>
                    <li><a href="#">养花与养生之道</a></li>
                    <li><a href="#">每天清晨的第一缕阳光</a></li>
                    <li><a href="#">花香的味道</a></li>
                    <li><a href="#">世界各地关于送花的习俗</a></li>
                    <li><a href="#">种花与送花</a></li>
                    <li><a href="#">手捧一束鲜花的等待</a></li>
                </ul>
            </div>
        </div>

    </div>
</body>

</html>